import { FC, useEffect, useMemo, useState } from 'react';

import { List, DatePicker } from 'antd-mobile';
import dayjs from 'dayjs';
import './index.css';
import { FundsObj } from '../../type';
import { dayFormatter, getBuyDataLocalKey } from '../../utils';
import useBack from './hook/useBack';
import useBaseFunDate from './hook/useBaseFunDate';
import useEstimate from './hook/useEstimate';

interface FundCardProps {
  fundInfo: FundsObj;
}

const FundCard: FC<FundCardProps> = ({ fundInfo }) => {
  const { code } = fundInfo;

  const { maxValObj, curValObj, buyObj, setBuyDate } = useBaseFunDate(fundInfo);
  const { maxBack } = useBack(code);
  const { estimateObj } = useEstimate(code);
  //购买时间
  const [visible, setVisible] = useState(false);

  //预估值回测率
  const estimateBack = useMemo(() => {
    const drawdownRate = ((maxValObj.val - estimateObj.val) / maxValObj.val) * 100;
    return drawdownRate;
  }, [maxValObj.val, estimateObj.val]);

  //获取最近买入时间
  const lastBuyRatio = useMemo(() => {
    if (!(buyObj?.date && maxValObj.date)) return '数据出错';
    let prevVal = buyObj.date < maxValObj.date ? maxValObj.val : buyObj.val;
    //求距离上次买入或者最高点下跌了多少
    return (((estimateObj.val - prevVal) / prevVal) * 100).toFixed(2);
  }, [maxValObj, estimateObj, buyObj]);

  return (
    <List style={{ marginBottom: '80px' }}>
      <List.Item title="名称" extra={fundInfo.name + `(${code})`} />
      <div className="subtitle">净值</div>
      <List.Item
        title={`预估净值 ${estimateObj.date} `}
        extra={
          <span>
            <span style={estimateObj.percent >= 0 ? { color: 'red' } : { color: 'green' }}>
              （{estimateObj.percent.toFixed(2)}%）
            </span>
            {estimateObj.val}
          </span>
        }
      />
      <List.Item title={`当前净值 (${dayFormatter(curValObj.date)}) `} extra={curValObj.val} />
      <List.Item title={`历史最高净值 (${dayFormatter(maxValObj.date)})`} extra={maxValObj.val} />

      <div className="subtitle">回测</div>
      <List.Item title={`预估回撤  ${estimateObj.date}`} extra={estimateBack.toFixed(2) + '%'} />
      <List.Item title="近三年回撤" extra={maxBack + '%'} />
      <List.Item
        title="回测百分比"
        extra={
          <span style={(estimateBack / maxBack) * 100 > 50 ? { color: 'rgb(249,187,28)' } : {}}>
            {((estimateBack / maxBack) * 100).toFixed(2) + '%'}
          </span>
        }
      />
      <div className="subtitle">购买</div>
      <List.Item
        title="预估离买涨跌"
        extra={
          <span style={Number(lastBuyRatio) < -4 ? { color: 'rgb(249,187,28)' } : {}}>
            {lastBuyRatio + '%'}
          </span>
        }
      />
      <List.Item title="最近购买时间" onClick={() => setVisible(true)}>
        {buyObj?.date ? dayFormatter(buyObj?.date) : '加载中'}
      </List.Item>

      <DatePicker
        title="时间选择"
        visible={visible}
        onClose={() => {
          setVisible(false);
        }}
        filter={{
          day: (_, { date }) => {
            const day = dayjs(date);
            return ![0, 6].includes(day.day());
          },
        }}
        max={new Date()}
        onConfirm={(val) => {
          const timestamp = Date.parse(val.toDateString());
          setBuyDate(timestamp);
        }}
      />
    </List>
  );
};
export default FundCard;
